<template>
  <div>
    <el-divider content-position="left">在线用户</el-divider>

    <div>
      <el-table
        height="550"
        :data="dataInfo"
        border
      >
        <el-table-column prop="userName" align="center" label="用户名"></el-table-column>

        <el-table-column prop="currentRecord" label="当前用户" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.currentRecord">{{scope.row.currentRecord}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="tokenId" align="center" label="标识"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="danger" @click="forcedUserOffline(scope.row.tokenId)">下线</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {searchOnlineUser, forcedOffline} from '@/api/user'

  export default {
    name: "userOnline",
    mounted() {
      this.init()
    },
    data() {
      return {
        dataInfo: []
      }
    },
    methods: {
      init() {
        searchOnlineUser().then((r) => {
          this.dataInfo = r
        })
      },
      forcedUserOffline(tokenId) {
        forcedOffline(tokenId).then(() => {
          this.$message.success('下线成功');
          this.init()
        })
      }
    }
  }
</script>

<style scoped>

</style>
